<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>系列课详情</title>
    <link rel="stylesheet" href="../../Public/css/mui.min.css">
    <link rel="stylesheet" href="../../Public/fonts/iconfont.css">
    <link rel="stylesheet" href="../../Public/css/global.css">
    <link rel="stylesheet" href="../css/course_index.css">
</head>
<body>
<div class="mui-content set-detail-content">
    <div class="detail-top bg-whtie">
        <img src="http://img5.imgtn.bdimg.com/it/u=3549496778,2425390027&fm=200&gp=0.jpg" alt="">
        <div class="detail-text">
            <p class="text-16 mui-ellipsis-2 color-333">瘦身大咖仅一字教你3个月瘦成一道闪电</p>
            <p class="text-13 m-t color-333">已开课7节 | 预计开课7节</p>
            <p class="text-mini m-t-sm"><span class="color-main text-bold text-16">￥21.00 </span><del> ￥299.00</del><span class="mui-pull-right"><i class="iconfont icon-icon"></i> 4000人次</span></p>
        </div>
        <div class="detail-opr">
            <img src="http://img3.imgtn.bdimg.com/it/u=1755039712,1084909715&fm=27&gp=0.jpg" class="img-circle">
            <span class="text-16 color-666">思维脑图</span>
            <span class="iconfont icon-renzheng color-yellow"></span>
        </div>
        <div style="padding:10px 15px;">
            <a href="onece_create.html">
                <p class="follow-btn r-pos color-main"><span class="iconfont icon-add color-main"></span>新建课程</p>
            </a>
        </div>
    </div>
    <div class="tab-wrap bg-whtie m-t">
        <ul class="tab-nav clearfix text-16">
            <li class="tn-active">直播简介</li>
            <li>购买须知</li>
            <li>精选留言</li>
        </ul>
        <div class="tab-content tc-active">
            直播简介
        </div>
        <div class="tab-content">
            <p>该内容为虚拟内容服务，如有疑问，请先点击左下角“咨询”按钮与内容供应商协商后购买。一经购买成功之后概不退款，敬请谅解。</p>
        </div>
        <div class="tab-content">
            <ul class="mui-table-view zixun-ul">
                <li class="mui-table-view-cell mui-media clearfix">
                    <a href="#" title="" class="mui-pull-left"><img class="mui-media-object mui-pull-left" src="http://img0.imgtn.bdimg.com/it/u=3637404049,2821183587&fm=27&gp=0.jpg"></a>
                    <div class="mui-media-body">
                        <a href="#" title=""><p class="text-15 color-666 m-t-sm">我是昵称</p></a>
                        <p class="color-999 m-t-3 text-mini">一个月前</p>
                        <p class="color-333 m-t m-b">听课可以停多久，能重复听么？</p>
                        <div class="replay">
                            <p class="color-666 name">直播教室回复<span class="text-mini color-999">一个月前</span></p>
                            <p class="color-333 m-t">您好，是一次购买，永久回访</p>
                        </div>
                    </div>
                    <p class="color-666 r-pos">1 <i class="iconfont icon-dianzan"></i></p>
                </li>
                <li class="mui-table-view-cell mui-media clearfix">
                    <a href="#" title="" class="mui-pull-left"><img class="mui-media-object mui-pull-left" src="http://img0.imgtn.bdimg.com/it/u=3637404049,2821183587&fm=27&gp=0.jpg"></a>
                    <div class="mui-media-body">
                        <a href="#" title=""><p class="text-15 color-666 m-t-sm">我是昵称</p></a>
                        <p class="color-999 m-t-3 text-mini">一个月前</p>
                        <p class="color-333 m-t m-b">听课可以停多久，能重复听么？</p>
                        <div class="replay">
                            <p class="color-666 name">直播教室回复<span class="text-mini color-999">一个月前</span></p>
                            <p class="color-333 m-t">您好，是一次购买，永久回访</p>
                        </div>
                    </div>
                    <p class="color-666 r-pos">1 <i class="iconfont icon-dianzan"></i></p>
                </li>
                <li class="mui-table-view-cell mui-media clearfix">
                    <a href="#" title="" class="mui-pull-left"><img class="mui-media-object mui-pull-left" src="http://img0.imgtn.bdimg.com/it/u=3637404049,2821183587&fm=27&gp=0.jpg"></a>
                    <div class="mui-media-body">
                        <a href="#" title=""><p class="text-15 color-666 m-t-sm">我是昵称</p></a>
                        <p class="color-999 m-t-3 text-mini">一个月前</p>
                        <p class="color-333 m-t m-b">听课可以停多久，能重复听么？</p>
                        <div class="replay">
                            <p class="color-666 name">直播教室回复<span class="text-mini color-999">一个月前</span></p>
                            <p class="color-333 m-t">您好，是一次购买，永久回访</p>
                        </div>
                    </div>
                    <p class="color-666 r-pos">1 <i class="iconfont icon-dianzan"></i></p>
                </li>
            </ul>
        </div>
    </div>
    <h5 class="rec-top m-t">
        <span class="text-15 bl-main color-333">课程</span>
    </h5>
    <div class="course-list">
        <ul class="mui-table-view hot-cell">
            <li class="mui-table-view-cell mui-media">
                <a href="#" class="mui-pull-left m-r-sm">
                    <img class="mui-media-object" src="http://img0.imgtn.bdimg.com/it/u=2129473072,572477714&fm=200&gp=0.jpg">
                </a>
                <div class="mui-media-body">
                    <a href="#" title="">
                        <p class="mui-ellipsis-2 text-14 color-333">
                            匀变速直线运动的速度与时间的关系·基础知识4条
                        </p>
                    </a>
                    <p class="color-999 m-t-md">
                        <span class="color-red"><i class="iconfont icon-shizhong color-red"></i> 两天后</span>
                        <span class="color-999 text-mini">12.2w人次学习</span>
                        <a href="single_detail.html" title="" class="mui-pull-right color-999"><i class="iconfont icon-xiangqing"></i>详情</a>
                    </p>
                </div>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="#" class="mui-pull-left m-r-sm">
                    <img class="mui-media-object" src="http://img0.imgtn.bdimg.com/it/u=2129473072,572477714&fm=200&gp=0.jpg">
                </a>
                <div class="mui-media-body">
                    <a href="#" title="">
                        <p class="mui-ellipsis-2 text-14 color-333">
                            匀变速直线运动的速度与时间的关系·基础知识4条
                        </p>
                    </a>
                    <p class="color-999 m-t-md">
                        <span class="jinxing">&bull; 进行中</span>
                        <span class="color-999 text-mini">12.2w人次学习</span>
                        <a href="single_detail.html" title="" class="mui-pull-right color-999"><i class="iconfont icon-xiangqing"></i>详情</a>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</div>
<div class="mui-bar mui-bar-tab mui-live-tab set-detail-bottom">
    <a href="series_create.html" class="zixun text-16"><span class="iconfont icon-bianji"> </span>编辑</a>
</div>
</body>
<script src="../../Public/libs/jquery-3.2.1.min.js" charset="utf-8"></script>
<script src="../../Public/libs/mui.min.js" charset="utf-8"></script>
<script type="text/javascript">
    mui('.mui-bar-tab').on('tap','a',function(){
        location.href = this.getAttribute('href');
    })
    $(function(){
        $('.tab-nav li').on('click',function(){
            var $this = $(this);
            if($this.hasClass('tn-active')){
                return false;
            }else{
                var ind = $this.index();
                $this.siblings('li').removeClass('tn-active');
                $this.addClass('tn-active');
                $('.tab-content').removeClass('tc-active').eq(ind).addClass('tc-active');
            }
        })
    })
</script>
</html>
